import React from "react";

import { Form, Input, Button, Checkbox, message } from "antd";

import styles from "./index.module.less";
import { post } from "../../utils/request";

export const Login = () => (
  <div className={styles["pege-wrap"]}>
    <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={(formObj)=> {
        post('/login', formObj)
          .then((res)=>{
            if(res){
              // 1 要把用户信息存到store

              // 2 如果当前的url上有callback参数，那就跳回去。
            }
          })

      }}
      onFinishFailed={()=>message.error("请输入正确格式的用户名和密码！")}
      autoComplete="off"
    >
      <Form.Item
        label="用户名"
        name="username"
        rules={[{ required: true, message: "Please input your username!" }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="密 码"
        name="password"
        rules={[{ required: true, message: "Please input your password!" }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          登陆
        </Button>
      </Form.Item>
    </Form>
  </div>
);

export default Login;
